<template>
	<view class="background">
		
	<view class="info-list">
		<view class="address-info">
		  <view class="address">
			  <uni-icons type="location" size="25" color="#ffd427"></uni-icons>
			  {{ order.address }}
		  </view>
		  <view class="name-phone">{{ order.name }} {{ order.phone }}</view>
		</view>
	</view>
	
  <view class="store-list">
		<!-- 遍历商店列表 -->
		<view v-for="(store, storeIndex) in stores" :key="storeIndex" class="store">
		  <view class="store-header" >
			<image class="store-logo" :src=" store.logo "></image>
			<!-- 商店名称 -->
			<text class="store-name">{{ store.name }}</text>
			<uni-icons type="forward" size="18" class="right-arrow-icon"></uni-icons>
		  </view>
		  <!-- 遍历商店中的商品列表 -->
		  <view v-for="(item, itemIndex) in store.cartItems" :key="itemIndex" class="item-row"  @click="goToStoreDetail(store.id)">
			<!-- 商品信息 -->
			<view class="item-info">
			  <!-- 商品图片 -->
			  <image class="item-image" :src="item.image"></image>
			  <!-- 商品名称、价格和数量 -->
			   <view class="item-details">
						  <!-- 商品名称 -->
						  <text class="item-name"><view class="goods_name">{{ item.name }}</view></text>
						  <!-- 商品价格和数量容器 -->
						  <view class="item-pricing-quantity">
							<!-- 商品价格 -->
							<text class="item-price">￥{{ item.price }}</text>
							<!-- 商品购买数量 -->
							<text class="item-quantity">x{{ item.quantity }}</text>
				</view>
			  </view>
			</view>
		  </view>
	
		
		<view class="store-actions">
		        <button v-if="store.status === '交易成功'"  class="add-to-cart-btn" @click="addToCart(storeIndex, itemIndex)">
		          <text>加入购物车</text>
		        </button>
		        <button v-if="store.status === '交易成功'"  class="reorder-btn" @click="reorder(store)">
		          再买一单
		        </button>
				<button v-if="store.status === '待收货'"  class="add-to-cart-btn" @click="addToCart(storeIndex, itemIndex)">
				  <text>查看物流</text>
				</button>
				<button v-if="store.status === '待收货'"  class="reorder-btn" @click="reorder(store)">
				  确认收货
				</button>
		 </view>
		 <view class="store-footer">
			<text>实付款：</text>
		 	<text class="actual-payment">￥{{ totalAmounts[storeIndex].toFixed(2)}}</text>
		 </view>
		 
		 <view class="store-footer">
		 	<text>订单编号：</text>
		 	<text>{{order.id}}</text>
		 </view>
		 
		</view>
	  </view>
	
	
	<view class="service-list">
		<view class="service">
		 <text class="item-service">宝贝服务</text>
		 <view class="exchange-info">
			 <view class="exchange"><uni-icons type="checkbox" size="20" class="right-arrow-icon"></uni-icons>七天无理由退换</view>
			 <view><uni-icons type="checkbox" size="20" class="right-arrow-icon"></uni-icons>运费险</view>
		</view>
		</view>
	</view>
	
	<view class="service-list">
		<view class="service">
		 <text class="problem">遇到问题？</text>
		 <view class="service-info">
			 <view class="servant"><uni-icons type="person-filled" size="20" class="right-arrow-icon" color="#ffd427"></uni-icons>淘工厂客服</view>
			 <view class="complaint"><uni-icons type="chat" size="20" class="right-arrow-icon" color="#ffd427"></uni-icons>投诉商家</view>
		</view>
		</view>
	</view>
	

</view>
</template>

<script>
	export default {
	 data() {
	    return {
		  order:{
			id:'',
			address:'',
			phone:'',
			name:'',
		  },
	      stores: [{
	      		status:'交易成功',
	      		name: '奥利奥宠物商店',
	      		logo:'../../static/images/pet/logo01.png',
	      		cartItems: [{
	      				id: 1,
	      				name: '小猫八八零零零asdasdadas零',
	      				price: 200.12,
	      				image: '../../static/images/pet/193619.png',
	      				quantity: 1,
	      			}],
					}],
	    };
	  },
	  computed: {
	     totalAmounts() {
	       // 计算每个商店的总金额
	       return this.stores.map(store => {
	         return store.cartItems.reduce((total, item) => {
	           return total + item.price * item.quantity;
	         }, 0);
	       });
	     },
	   },
	   methods: {
		  fetchOrderDetails() {
		      // 假设使用订单号orderNumber获取订单数据
		      const orderNumber = '123456789'; // 这里替换成实际的订单号
		      // 模拟API请求获取订单数据
		      this.order = {
		        address: '理工路600号厦门理工学院',
		        phone: '86-173****7368',
		        name: '李成',
				id:'1',
		        // 其他属性...
		      };
			  },
	      reorder() {
	        // 再次购买的逻辑
	        console.log('再次购买订单中的商品');
	      },
	    },
	  created() {
	    const storeId = this.$route.params.storeId;
		  this.fetchOrderDetails();
	    // 使用storeId加载商店详情数据...
	  },
	};
</script>

<style lang="scss" scoped>
	@use "order-detail";
</style>